<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reactive } from "vue";
import type { FormRules } from "element-plus";
import { getMerchantsEnums } from "@/api/zhaoyuan";

// 定义 formInline 的类型
interface FormInline {
  merchantName: string;
  businessType: string;
  address: string;
  latitude: string;
  longitude: string;
  contactInfo: string;
  operationYears: string;
  businessScale: string;
  storefrontImageUrl: string;
}
// 定义 props 类型
interface Props {
  formInline?: FormInline;
}

/** 自定义表单规则校验 */
const formRules = reactive<FormRules>({
  merchantName: [
    {
      required: true,
      message: "商户名称必填",
      trigger: "blur"
    }
  ],
  businessType: [
    {
      required: true,
      message: "商户类型必填",
      trigger: "blur"
    }
  ],
  businessScale: [
    {
      required: true,
      message: "商户规模必填",
      trigger: "blur"
    }
  ]
});
const props = withDefaults(defineProps<Props>(), {
  formInline: () => ({
    merchantName: "",
    businessType: "",
    address: "",
    latitude: "",
    longitude: "",
    contactInfo: "",
    operationYears: "",
    businessScale: "",
    storefrontImageUrl: "",
    productImages: [],
    interiorImages: []
  })
});
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
function getRef() {
  return ruleFormRef.value;
}

interface ApiResponse {
  [key: string]: any; // 表示对象可以有任意属性，属性值为任意类型
}

const pageData = ref<ApiResponse>({});

onMounted(() => {
  getMerchantsEnums().then(res => {
    pageData.value = res;
  });
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="商户名称" prop="merchantName">
      <el-input
        v-model="newFormInline.merchantName"
        clearable
        placeholder="请输入商户名称"
      />
    </el-form-item>

    <el-form-item label="类型" prop="businessType">
      <el-select
        v-model="newFormInline.businessType"
        placeholder="请选择类型"
        style="width: 240px"
      >
        <el-option
          v-for="item in pageData?.businessTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="地址" prop="address">
      <el-input
        v-model="newFormInline.address"
        clearable
        placeholder="请输入地址"
      />
    </el-form-item>
    <el-form-item label="联系电话" prop="contactInfo">
      <el-input
        v-model="newFormInline.contactInfo"
        clearable
        placeholder="请输入联系电话"
      />
    </el-form-item>
    <el-form-item label="经营年限" prop="operationYears">
      <el-input
        v-model="newFormInline.operationYears"
        clearable
        placeholder="请输入经营年限"
      />
    </el-form-item>
    <el-form-item label="商户规模" prop="businessScale">
      <el-select
        v-model="newFormInline.businessScale"
        placeholder="请选择商户规模"
        style="width: 240px"
      >
        <el-option
          v-for="item in pageData?.businessScaleList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="门脸照" prop="storefrontImageUrl">
      <el-input
        v-model="newFormInline.storefrontImageUrl"
        clearable
        placeholder="请输入门脸照"
      />
    </el-form-item>
    <el-form-item label="产品照片" prop="productImages">
      <el-input clearable placeholder="请输入产品照片" />
    </el-form-item>
    <el-form-item label="内部照片" prop="interiorImages">
      <el-input clearable placeholder="请输入内部照片" />
    </el-form-item>
  </el-form>
</template>
